<template>
    <!--        热门-->
    <div class="hots">
        <div class="hot_title">热门新闻</div>
        <ul class="hot_news">
            <router-link tag="li" v-for="(item,index) in list" :key="index" :to="'/NewsPage/'+item.articleId">
                <van-row type="flex">
                    <van-col span="2" style="text-align: end">
                        <van-icon name="fire" style="vertical-align: middle;" color="red" />
                    </van-col>
                    <van-col span="16" style="text-overflow: ellipsis;white-space:nowrap;overflow: hidden">
                        <span>{{item.title}}</span>
                    </van-col>
                </van-row>
            </router-link>
        </ul>
    </div>

</template>

<script>
    import {getHot} from "../../api/GoodNews";

    export default {
        name: "hot",
        data(){
            return{
                list:[]
            }
        },
        created(){
            this.$store.commit("favorite",
                {favorite: 1,})
            getHot(1,10).then(res=>{
                // console.log(res)
                this.list = res.rows
            })
        }
    }
</script>

<style scoped lang="less">
    .hots {
        margin-top: 50px;

    .hot_title {
        font-size: 22px;
        font-weight: bold;
        color: #FD7304;
        text-indent: 1em;
    }

    .hot_news {
        margin-top: 10px;

    li {
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        color: #888888;
    }

    }
    }
</style>